<template>
  <div class="setting-group">
    <div class="buttons center-x">
      <div class="item" v-for="button in basicButtons" :key="button.label">
        <button @click="clickHandler(button)">{{ button.label }}</button>
      </div>
    </div>
    <div class="buttons center-x">
      <div class="item" v-for="(button, index) in colorButtons" :key="index">
        <DigitalNumber 
          :value="score.colorScore[button.value || 'green']" 
          :len="4" 
          size="small"/>
        <button @click="clickHandler(button)" :class="'bg-' + button.value" >{{ button.label }}</button>
      </div>
    </div>
    <div class="buttons center-x">
      <div class="item" v-for="button in pointButtons" :key="button.label">
        <DigitalNumber 
          :value="score.pointScore[button.value || 'person']" 
          :len="3" 
          size="small" />
        <button @click="clickHandler(button)">
          <img :src="require('@/assets/images/' + button.value + '.png')"  />
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { _Object } from '@/utils/props'
  import DigitalNumber from './DigitalNumber.vue'
  import { basicButtons } from '@/utils/config'
  import { 
    useColorButtonsRef, 
    usePointButtonsRef 
  } from '@/composables/useButton'
  import { Action } from '@/utils/types'
  import useStore from '@/composables/useStore'
  const { game, score } = useStore()
  const colorButtons = useColorButtonsRef()
  const pointButtons = usePointButtonsRef()
  const emit = defineEmits([
    'toLeft',
    'toRight',
    'setSingle',
    'setDouble',
    'setSmall',
    'setLarge',
    'setColor',
    'setScore',
    'onStart'
  ])
  const clickHandler = (params: any) => {
    if (game.running) return
    switch (params.action) {
      case Action.Left:
        emit('toLeft', params)
        break
      case Action.Right:
        emit('toRight', params)
        break
      case Action.Single:
        emit('setSingle', params)
        break
      case Action.Double:
        emit('setDouble', params)
        break
      case Action.Small:
        emit('setSmall', params)
        break
      case Action.Large:
        emit('setLarge', params)
        break
      case Action.Color:
        emit('setColor', params)
        break
      case Action.Score:
        emit('setScore', params)
        break
      case Action.Start:
        emit('onStart', params)
    }
 }
</script>